<template>
	<contents
		:heightInclude="['navBar', 'tabBar']"
		class="forget_password_page"
		backgroundColor="#fff"
	>
		<u-navbar
			:background="{ background: '#fff' }"
			title-color="#000"
			back-icon-color="#000"
			:title="$t('locales.pages/user/forgetPassword/index')"
			:custom-back="customBack"
		></u-navbar>
		<view class="step_box">
			<u-row>
				<u-col span="4">
					<view class="steps_item">
						<view class="steps_item_num">
							<u-icon name="checkmark" color="#fff" size="36"></u-icon>
						</view>
						<view class="steps_item_name">{{ $t('locales.pleaseEnterNumber') }}</view>
						<view class="steps_item_icon">
							<u-icon
								name="arrow-right"
								color="#3090FC"
								size="28"
							></u-icon>
						</view>
					</view>
				</u-col>
				<u-col span="4">
					<view class="steps_item">
						<view class="steps_item_num">
							<u-icon v-if="step === 2 || step === 3" name="checkmark" color="#fff" size="36"></u-icon>
							<text v-else>2</text>
						</view>
						<view class="steps_item_name">{{ $t('locales.getCaptcha') }}</view>
						<view class="steps_item_icon">
							<u-icon
								name="arrow-right"
								color="#3090FC"
								size="28"
							></u-icon>
						</view>
					</view>
				</u-col>
				<u-col span="4">
					<view class="steps_item">
						<view class="steps_item_num">
							<u-icon v-if="step === 3" name="checkmark" color="#fff" size="36"></u-icon>
							<text v-else>3</text>
						</view>
						<view class="steps_item_name">{{ $t('locales.setNewPwd') }}</view>
					</view>
				</u-col>
			</u-row>
		</view>
		<u-form
			v-if="step === 1"
			:model="form"
			ref="form"
			class="register_form"
			label-width="120"
			:label-style="{ paddingRight: '15rpx' }"
		>
			<u-form-item
				:label="$t('locales.account')" 
				prop="username"
			>
				<u-input
					:disabled="disabled"
					v-model="form.username"
					:placeholder="$t('locales.pleaseEnterNumber')"
				/>
			</u-form-item>
		</u-form>

		<u-form
			v-if="step === 2"
			:model="form"
			ref="form"
			class="register_form"
			label-width="120"
			:label-style="{ paddingRight: '15rpx' }"
		>
			<view class="send_info">{{ $t('locales.sendIn') }} {{$u.test.email(form.username) ? $t('locales.email') : $t('locales.phone')}}: {{form.username}}</view>
			<u-form-item :label="$t('locales.verificationCode')" prop="code">
				<u-input
					type="number"
					maxlength="6"
					v-model="form.code"
					:placeholder="$t('locales.inputSMSCode')"
				/>
				<SetCode
					slot="right"
					:phone="form.username"
					uniqueKey="register"
					@success="SetCodeSuccess"
					:request="{
						type: 'FORGET_PASSWORD'
					}"
				/>
			</u-form-item>
		</u-form>

		<u-form
			v-if="step === 3"
			:model="form"
			ref="form"
			class="register_form"
			label-width="120"
			:label-style="{ paddingRight: '15rpx' }"
		>
			<u-form-item :label="$t('locales.pwd')" prop="password">
				<u-input
					maxlength="20"
					v-model="form.password"
					:placeholder="$t('locales.pleaseEnterPassword')"
					type="password"
				/>
			</u-form-item>
		</u-form>
		<SubmitBtn :text="step !== 3 ? $t('locales.nextStep') : $t('locales.submit')" @click="submit" />
	</contents>
</template>

<script>
import SetCode from '@/components/setSmsCode'
import SubmitBtn from '@/components/submitBtn'
import { Base64 } from '@/util/base64'
import { resetPassword, checkResetCode } from '@/api/http/user'
export default {
	components: {
		SetCode,
		SubmitBtn
	},
	data() {
		return {
			step: 1,
			form: {
				username: '', // 手机
				code: '', // 验证码
				password: '' // 密码
			},
			disabled: false,
			rules: {
				username: [
					{
						required: true,
						message: this.$t('locales.pleaseEnterNumber'),
						trigger: 'blur'
					}
				],
				code: [
					{
						required: true,
						message: this.$t('locales.inputSMSCode'),
						trigger: 'blur'
					},
					{
						min: 6,
						message: this.$t('locales.digitErr'),
						trigger: 'blur'
					}
				],
				password: [
					{
						required: true,
						message: this.$t('locales.pleaseEnterPassword'),
						trigger: 'blur'
					},
					{
						min: 6,
						message: this.$t('locales.digitPwdErr'),
						trigger: 'blur'
					}
				]
			}
		}
	},
	onLoad(opt) {
		if (opt.mobile) {
			this.disabled = true
		}
		this.form.username = opt.mobile
	},
	// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
	onReady() {
		this.$refs.form.setRules(this.rules)
	},
	methods: {
		customBack() {
			if (this.step !== 1) {
				this.$refs.form.resetFields()
				this.step -= 1
			} else {
				uni.navigateBack()
			}
		},
		SetCodeSuccess() {
			if (this.$u.test.email(this.form.username)) {
				uni.showToast({
					icon: 'none',
					title: this.$t('locales.emailMsg')
				})
			} else {
				uni.showToast({
					icon: 'none',
					title: this.$t('locales.SMSMsg')
				})
			}
		},
		// 提交
		submit() {
			this.$refs.form.validate(valid => {
				if (!valid) return
				switch (this.step) {
					case 1:
						this.step += 1
						break
					case 2:
						checkResetCode({
							...this.form
						}).then(res => {
							if (res.code === 200) {
								this.step += 1
							} else {
								uni.showToast({
									icon: 'none',
									title: res.message
								})
							}
						})
						break
					case 3:
						let formData = this.$u.deepClone(this.form)
						formData.password = Base64.encode(this.form.password)
						resetPassword({
							...formData
						}).then(res => {
							uni.showToast({
								icon: 'none',
								title: res.message
							})
							if (res.code === 200) {
								setTimeout(() => {
									uni.navigateBack()
								}, 1000)
							}
						})
						break
				}
			})
		}
	}
}
</script>

<style lang="scss">
.forget_password_page {
	.step_box {
		padding: 30rpx;
		margin-bottom: 30rpx;
		.steps_item {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			position: relative;
			.steps_item_num {
				background-color: #3090fc;
				width: 64rpx;
				height: 64rpx;
				border-radius: 50%;
				text-align: center;
				line-height: 64rpx;
				color: #fff;
				font-size: 36rpx;
			}
			.steps_item_name {
				height: 50rpx;
				margin-top: 20rpx;
				font-size: 24rpx;
				font-weight: 500;
				color: #999999;
			}
			.steps_item_icon {
				position: absolute;
				top: 15rpx;
				right: -25rpx;
			}
		}
	}
	.send_info {
		font-size: 28rpx;
		color: #777777;
		margin-bottom: 30rpx;
	}
	.u-form {
		padding: 0 30rpx;
		background-color: #fff;
	}
}
</style>
